import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'

// 柱状图组件
// 1. 把功能代码都放到这个组件中
// 2. 把可变的部分抽象成 prop 参数
const BarChart = ({ title, xData, sData, style = { width: '400px', height: '300px' } }) => {
  const chatRef = useRef(null)
  useEffect(() => {
    // 保证 dom 可用，才进行图表渲染
    // 获取渲染图表的 dom 节点
    const chartDom = chatRef.current
    // 图表初始化生成图表实例对象
    const myChart = echarts.init(chartDom)
    // 准备图表参数
    const option = {
      title: {
        text: title
      },
      xAxis: {
        type: 'category',
        data: xData
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: sData,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    }
    // 使用图表参数完成图表的渲染
    option && myChart.setOption(option)
  }, [])
  return (
    <div ref={chatRef} style={{width: '400px', height: '300px'}}></div>
  ) 
}

export default BarChart